<template>
  <div class="box-bottom">
    <div class="nav">
      <div>预警次数对比</div>
      <!--      <div class="time">-->
      <!--        <div class="border-r" :class="handleDataType == 'TB' ? 'timexz' : ''" @click="tabhandle('TB')">同比</div>-->
      <!--        <div :class="handleDataType == 'Hb' ? 'timexz' : ''" @click="tabhandle('Hb')">环比</div>-->
      <!--      </div>-->
    </div>
    <div id="centerEchart" class="conton"></div>
  </div>
</template>

<script>
import useView from "@/hooks/useView";
import {defineComponent, reactive, toRefs} from "vue";
import baseService from "@/service/baseService";
import * as echarts from "echarts";

export default defineComponent({
  name: "RealTimeTree",
  setup() {
    const state = reactive({
      myChart: null,
      handleDataType: "TB"
    });
    return {...useView(state), ...toRefs(state)};
  },
  mounted() {
    let chartDom = document.getElementById("centerEchart");
    this.myChart = echarts.init(chartDom);
    this.getInfo();
  },
  methods: {
    tabhandle(data) {
      this.handleDataType = data;
      this.getInfo();
    },
    // 获取信息
    getInfo() {
      baseService.get(`/homeData/getWarningTimes`).then((res) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg);
        }
        let legendData = Object.entries(res.data).map(([name]) => (name));
        let seriesData = Object.entries(res.data).map(([name, value]) => (value));
        console.log(legendData, seriesData)

        let option = {
          tooltip: {
            trigger: "axis"
          },
          legend: {
            data: ["Video Ads", "Direct"]
          },
          grid: {
            left: "left",
            top: "30",
            bottom: "20",
            // height: "90%",
            containLabel: true,
            borderWidth: 0,
            show: false
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          xAxis: {
            type: "category",
            boundaryGap: false,
            data: legendData,
            axisTick: {
              show: false // 去掉 X 轴刻度
            }
          },
          yAxis: {
            type: "value",
            splitLine: {show: false}
          },
          series: [
            {
              name: "Video Ads",
              type: "line",
              smooth: true,
              stack: "Total",
              emphasis: {
                focus: "series"
              },
              symbol: "none",
              data: seriesData
            },
            {
              name: "Direct",
              type: "line",
              smooth: true,
              stack: "Total",
              emphasis: {
                focus: "series"
              },
              symbol: "none",
              data: seriesData
            }
          ],
          visualMap: [
            {
              show: false, //隐藏渐变图例
              type: "continuous",
              min: 0,
              max: 400
            }
          ]
        };

        option && this.myChart.setOption(option);
      });


    }
  }
});
</script>

<style lang="scss" scoped>
.border-r {
  border-right: 1px rgba($color: #1e516a, $alpha: 0.7) solid;
}

.timexz {
  color: #022430;
  background-color: #12dbf2;
}

.box-bottom {
  width: 100%;
  height: 100%;
  padding: 5px;
  overflow: hidden;
  position: relative;
  flex: 1;
  color: #fff;

  .nav {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .time {
      cursor: pointer;
      color: #12dbf2;
      display: flex;
      align-items: center;
      border: 1px rgba($color: #1e516a, $alpha: 0.7) solid;
      font-size: 12px;

      div {
        padding: 1px 8px;
      }
    }
  }

  .conton {
    width: 100%;
    height: 100%;
  }
}
</style>
